<template>
  <div class="padding_10">
    <el-button
      v-permissions="{ permission: ['add:Supplier'] }"
      type="primary"
      @click="openSupplierDialog"
    >
      新增供应商
    </el-button>

    <el-table
      :data="supplierList"
      :empty-text="emptyText"
      style="margin-top: 10px"
    >
      <el-table-column label="供应商名称" prop="supplier_name" />
      <el-table-column label="供应人" prop="contact" />
      <el-table-column label="联系方式" prop="tel" />
      <el-table-column label="创建时间" prop="created_at" />
      <el-table-column align="left" label="操作">
        <template slot-scope="scope">
          <div class="flex_y_center">
            <el-button
              v-permissions="{ permission: ['edit:Supplier'] }"
              type="primary"
              @click="changeSupplier(scope.$index)"
            >
              编辑
            </el-button>
            <el-button
              v-permissions="{ permission: ['delete:Supplier'] }"
              type="danger"
              @click="delSuppliers(scope.row.id)"
            >
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="flex_between">
      <div></div>
      <el-pagination
        :current-page.sync="page"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="getSupplierList"
      />
    </div>

    <!-- 新增，编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <div>
        <div
          v-for="(item, index) of supplierInfo"
          :key="index"
          class="flex_y_center"
          style="margin-bottom: 15px"
        >
          <div style="width: 30%; text-align: right">
            <span v-show="index < 3">*</span>
            {{ item.name }}
          </div>
          <el-input
            v-model="formLabelAlign[item.value]"
            clearable
            :placeholder="item.place"
            style="width: 40%"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="searchSupplier">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getSupplierInfoList, addSupplier, delSupplier } from '@/api/supplier'

  export default {
    data() {
      return {
        dialogFormVisible: false, // 控制新增，编辑供应商对话框的显示，隐藏
        dialogTitle: '', // 新增，编辑供应商对话框标题的显示内容

        page: 1,
        total: 10, // 控制分页显示的页码数
        emptyText: ' ',
        supplierList: [], // 存放获取的供应商信息列表
        supplierId: 0, // 供应商id

        supplierInfo: [
          {
            name: '供应商名称：',
            place: '请输入供应商名称',
            value: 'supplier_name',
          },
          { name: '联系人：', place: '请输入联系人', value: 'contact' },
          { name: '联系人电话：', place: '请输入联系人电话', value: 'tel' },
          { name: '税号：', place: '请输入税号', value: 'company_sn' },
          {
            name: '付款信息开户行：',
            place: '请输入付款信息开户行',
            value: 'bank_name',
          },
          {
            name: '付款信息银行账户：',
            place: '请输入付款信息银行账户',
            value: 'bank_sn',
          },
          { name: '户名：', place: '请输入户名', value: 'bank_title' },
        ],

        formLabelAlign: {
          id: '',
          supplier_name: '',
          contact: '',
          tel: '',
          company_sn: '',
          bank_name: '',
          bank_sn: '',
          bank_title: '',
        },
        hint: {
          supplier_name: '供应商名称',
          contact: '联系人',
          tel: '联系人电话',
        },
      }
    },
    mounted() {
      this.getSupplierList()
    },
    methods: {
      // 获取供应商列表
      getSupplierList() {
        const loading = this.$loading({
          lock: true,
          target:
            this.supplierList.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const params = {
          page: this.page,
          pageSize: 10,
        }
        getSupplierInfoList(params).then((res) => {
          this.supplierList = res.data.data
          this.total = res.data.last_page * 10
          loading.close()
          if (res.data.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 打开新增对话框
      openSupplierDialog() {
        this.dialogTitle = '新增供应商'
        this.dialogFormVisible = true
        for (let item in this.formLabelAlign) {
          this.formLabelAlign[item] = ''
        }
      },
      // 打开编辑对话框
      changeSupplier(index) {
        this.dialogTitle = '编辑供应商'
        this.dialogFormVisible = true

        this.formLabelAlign.id = this.supplierList[index].id
        for (let item in this.supplierList[index]) {
          if (this.supplierList[index][item] == '未知') {
            this.formLabelAlign[item] = ''
          } else {
            this.formLabelAlign[item] = this.supplierList[index][item]
          }
        }
      },
      // 删除指定供应商
      delSuppliers(id) {
        this.$confirm('此操作将永久删除该供应商, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          // 用户点击确认
          .then(() => {
            delSupplier(id).then(() => {
              this.getSupplierList()
            })
          })
          // 用户点击取消
          .catch(() => {})
      },
      // 检索用户的输入是否为空
      searchSupplier() {
        // 检索输入
        for (let item in this.hint) {
          if (this.formLabelAlign[item] == '') {
            this.$message.error(this.hint[item] + '未填写')
            return
          }
        }

        this.newSupplier()
      },
      // 新增，编辑供应商
      newSupplier() {
        addSupplier(this.formLabelAlign).then(() => {
          this.dialogFormVisible = false
          this.getSupplierList()
        })
      },
    },
  }
</script>

<style scoped>
  span {
    color: red;
  }
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
